<template>
	<div class="echart">
		<canvas
			:id="idName"
			:style="{
				width:width,
				height:height
			}"
			:idName1="idName"
			:option1="option"
			:change:option1="echarts.optionChange"
			:change:idName1="echarts.idNameChange"
		></canvas>
	</div>
</template>

<script>
	export default {
		props:{
			height: {
				type: String,
				default: "482rpx"
			},
			option: {
				type: Object,
				default: null
			},
			width: {
				type: String,
				default: "100%"
			},
			idName:{
				type: String,
				default: 'echarts'
			}
		},
		data(){
			return {
				
			}
		},
		mounted() {
		},
		beforeDestroy() {
		},
		methods:{
			receiveRenderData(val){
				this.$emit('chartClick',val)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart={};
	export default {
		data() {
			return {
				myChart: null,
				idName1: '',
				option1: null
			}
		},
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/js/echarts/echarts_2.js'
				//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
				script.onload = ()=>{
					this.initEcharts()
				}
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts(e){
				echarts.env.touchEventsSupported = false;
				echarts.env.wxa = false;
				const idName = this.idName1
				const dom = document.getElementById(idName);
				myChart[idName] = echarts.init(dom)
				this.option1 && myChart[idName].setOption(this.option1)
				// 添加点击事件监听器
				const _this = this;
				myChart[idName].getZr().on('click', (param) => {
					const pointInPixel = [param.offsetX, param.offsetY]
					// 使用 convertFromPixel方法 将像素坐标值转换成逻辑坐标系上的点
					let pointInGrid = myChart[idName].convertFromPixel({ seriesIndex: 0 }, pointInPixel);
					let pointInGrid2 = myChart[idName].convertFromPixel({ seriesIndex: 1 }, pointInPixel);
					// 所点击点的X轴坐标点所在X轴data的下标
					let xIndex = pointInGrid[0];
					let yIndex = pointInGrid2;
					//点击范围是否在grid逻辑坐标系内
					if(myChart[idName].containPixel('grid', pointInPixel)){
						this.$ownerInstance.callMethod('receiveRenderData',{xIndex})
					}
				});
				// echarts.registerAction(
				//    {
				//       type: 'mousemove',
				//       event: 'mousemove',
				//       update: 'updateTooltip',
				//    },
				//    function (payload, ecModel) {
				// 	   console.log('333333333333333')
				//       var cur = payload.event.target;
				//       while (cur && cur.nodeType !== 9 && !(cur.ecTooltipId && ecModel.getComponent('tooltip', cur.ecTooltipId))) {
				//          cur = cur.parentNode;
				//       }
				//       if (cur) {
				//          var tooltip = ecModel.getComponent('tooltip', cur.ecTooltipId);
				//          clearTimeout(tooltip._hideTimeout);
				//          tooltip._hideTimeout = setTimeout(function () {
				//             tooltip.hideTip();
				//          }, 3000);
				//       }
				//    }
				// );
			},
			optionChange(newValue, oldValue, ownerVm, vm) {
				if(!newValue) return;
				this.option1 = newValue;
				const time = setInterval(() =>{
					if(myChart[this.idName1]){
						// myChart[this.idName].clear()
						myChart[this.idName1].setOption(newValue)
						clearInterval(time)
					}
				})
			},
			idNameChange(newValue, oldValue, ownerVm, vm) {
				this.idName1 = newValue;
			},
			handleChartClick(e) {
				const obj = document.getElementById(this.idName1);
				var x = Number(window.event.clientX) // 鼠标相对屏幕横坐标
				var y = Number(window.event.clientY) // 鼠标相对屏幕纵坐标
			
				var div_x = Number(obj.getBoundingClientRect().left) // obj相对屏幕的横坐标
				var div_x_width = Number(
					obj.getBoundingClientRect().left + obj.clientWidth
				) // obj相对屏幕的横坐标+width
			
				var div_y = Number(obj.getBoundingClientRect().top) // obj相对屏幕的纵坐标
				var div_y_height = Number(
					obj.getBoundingClientRect().top + obj.clientHeight
				) // obj相对屏幕的纵坐标+height
				if (x < div_x || x > div_x_width || y < div_y || y > div_y_height) {
					console.log('隐藏')
					return true
				} else {
					console.log('不隐藏')
					return false
				}
				
			}
		}
	}
</script>

<style>
</style>